// 引入 G6 工具函数
import Util from '@antv/g6/src/util'
// 引入事件总线，用于组件间通信
import eventBus from "@/utils/eventBus";
export default {
    // 获取默认配置，支持多选和多选键 keyCode
    getDefaultCfg() {
        return {
            multiple: true, // 是否支持多选
            keyCode: 16     // 多选键（Shift）
        };
    },
    // 注册需要监听的事件
    getEvents() {
        return {
            'node:click': 'onClick',             // 节点点击
            'canvas:click': 'onCanvasClick',     // 画布点击
            'canvas:mouseover': 'onCanvasMouseover', // 画布鼠标移入
            keyup: 'onKeyUp',                   // 键盘弹起
            keydown: 'onKeyDown'                // 键盘按下
        };
    },
    // 节点点击时的处理逻辑
    onClick(e) {
        const self = this;
        const item = e.item;
        const graph = self.graph;
        // 关闭自动渲染，批量操作提升性能
        const autoPaint = graph.get('autoPaint');
        graph.setAutoPaint(false);
        // 取消所有已选中的边
        const selectedEdges = graph.findAllByState('edge', 'selected');
        Util.each(selectedEdges, edge => {
            graph.setItemState(edge, 'selected', false);
        });
        // 如果没有按下多选键，则取消其他已选中的节点
        if (!self.keydown || !self.multiple) {
            const selected = graph.findAllByState('node', 'selected');
            Util.each(selected, node => {
                if (node !== item) {
                    graph.setItemState(node, 'selected', false);
                }
            });
        }
        // 切换当前节点的选中状态
        if (item.hasState('selected')) {
            if (self.shouldUpdate.call(self, e)) {
                graph.setItemState(item, 'selected', false);
            }
          
            // 通过事件总线通知选中状态变化
            eventBus.$emit('nodeselectchange', { target: item, select: false });
        } else {
            if (self.shouldUpdate.call(self, e)) {
                graph.setItemState(item, 'selected', true);
            }
            // 通过事件总线通知选中状态变化
            eventBus.$emit('nodeselectchange', { target: item, select: true });
        }
        // 恢复自动渲染
        graph.setAutoPaint(autoPaint);
        graph.paint();
    },
    // 画布点击时，取消所有选中状态
    onCanvasClick() {
        const graph = this.graph;
        const autoPaint = graph.get('autoPaint');
        graph.setAutoPaint(false);
        // 取消所有已选中的节点
        const selected = graph.findAllByState('node', 'selected');
        Util.each(selected, node => {
            graph.setItemState(node, 'selected', false);
            eventBus.$emit('nodeselectchange', { target: node, select: false });
        });
        // 取消所有已选中的边
        const selectedEdges = graph.findAllByState('edge', 'selected');
        Util.each(selectedEdges, edge => {
            graph.setItemState(edge, 'selected', false);
            eventBus.$emit('nodeselectchange', { target: edge, select: false });
        })

        graph.paint();
        graph.setAutoPaint(autoPaint);
    },
    // 画布鼠标移入时，刷新画布
    onCanvasMouseover() {
        const graph = this.graph;
        graph.paint();
    },
    // 键盘按下时，判断是否按下多选键
    onKeyDown(e) {
        const code = e.keyCode || e.which;
        if (code === this.keyCode) {
            this.keydown = true;
        } else {
            this.keydown = false;
        }
    },
    // 键盘弹起时，重置多选状态
    onKeyUp() {
        this.keydown = false;
    }
};
